<template>
<div class="apply-success-container">
   <div class="apply-success-wrap">
      <div class="course-info apply-info">
         <div class="clearfix">
             <div class="title">活动名称</div>
             <div class="name">
               {{query.title}}
             </div>
         </div>
         <div class="apply-name">
              票种
              <span>{{query.catalogName}}</span>
         </div>
         <div>
              数量
              <span>{{query.count}}张</span>
         </div>
         <div>
              票价
              <span>￥{{query.price}}</span>
         </div>
         <div>
              报名时间
              <span>{{time}}</span>
         </div>
      </div>
      <div class="course-info apply-info-sign">
         <h3 class="info">请填写报名信息</h3>
         <input type="text" placeholder="请输入姓名" v-model="contactName"></input>
         <input type="number" placeholder="请输入联系人手机号" v-model="contactPhonenumber"></input>
         <div class="tel-group">
            <input type="number" v-model="areacode" placeholder="区号如：021"/>
            <input type="number" v-model="contactTel" placeholder="请输入联系电话"/>
          </div>
      </div>
      <div class="course-info apply-info-sign">
         <h3 class="info">支付方式</h3>
         <div class="pay-weichat">
             <i class="icon-wechat"></i>
             <div class="weichat">微信支付</br><span>推荐安装微信5.0及以上版本的用户使用</span></div>
             <i class="icon-checked"></i>
         </div>
      </div>
      <div class="fixed-tools-wrap">
        <div class="fixed-tools">
          <strong>支付金额：</strong><span class="price">&yen;{{query.price}}</span>
          <button class="btn btn-primary signup-btn pull-right" @click="openPay()">立即支付</button>
        </div>
      </div>
   </div>
</div>

</template>

<script>
    import {PLACE_ORDER_RECORD} from '../../api';
    import jskit from '../../assets/jskit';
    import auth from '../../utils/auth';
    export default {
        data(){
            return{
              contactName:'',
              contactPhonenumber:'',
              contactCompany:'',
              contactPosition:'',
              contactTel:'',
              query:this.$route.query,
              time:new Date().toLocaleString()
            }
        },
        methods:{
          openPay(){

            let {
              id,
              count
            } = this.query;

            if(!this.contactName){
                return this.$toast.show('联系人不能为空');
             }else if(!(this.contactPhonenumber || this.contactTel)){
                return this.$toast.show('联系电话和手机不能都为空');
             }

             if(this.contactTel && !this.areacode){
                return this.$toast.show('区号不能为空');
             }

            this.$http.get(PLACE_ORDER_RECORD,{
              subitem_id :id,
              count,
              contact_name:this.contactName,
              contact_phonenumber:this.contactPhonenumber,
              contact_tel:this.areacode+'-'+this.contactTel,
              contact_company:this.contactCompany,
              contact_position:this.contactPosition,
            })
            .then(res =>{
                const gotoSuccess = ()=>{
                  this.query.name = this.contactName
                  this.query.phone = this.contactPhonenumber

                  this.query.orderId = res.data.data;
                  this.$router.go({
                    name:'activity.successful',
                    query:this.query
                  })
                }
                if(res.data.code == 0 ){
                  jskit.openPay({
                    order_id:res.data.data,
                    access_token:auth.getToken(),
                    success:()=>{
                      gotoSuccess()
                    },
                    error:(err)=>{
                      this.$toast.show('支付失败');
                    }
                  })
                }else if(res.data.code == 10){
                  gotoSuccess()
                }else{
                  this.$toast.show(res.data.message);
                }
            })
          }
        },
        ready(){
        },
        components:{

        }
    }
</script>
<style lang="sass">
     @import "../../sass/apply.scss";
</style>
